<template>
	<div id="app">
	
		<div ref="box" class="banners"
			style="background-color: #000000;position: relative;">
			<img style="height:100vh;width:100vw;pointer-events:none;" src="/static/img/haibao.png" crossorigin="anonymous" alt="">
			<!-- <div class="heads clearfix" style="position: absolute;top:30px ;z-index: 1;left: 30px;">
				<div class="fl">

					<img :src="info.logo" alt="" crossorigin="anonymous" style="height: 30px;width: 30px;">
				</div>
				<div class="fl" style="margin-top:3px ;margin-left:10px ;">
					<img :src="info.topimg" alt="" crossorigin="anonymous" style="height: 24px;">
				</div>
			</div> -->
      <div id="qrcodes" style="margin: 0 auto;"></div>
			<!-- <div class="boss"
				style="position: absolute;top:60%;border-radius: 12px;display: flex;flex-direction: column;justify-content: center;width: 100%;left: 0%;">
				<div id="qrcodes" style="width: 150px;height: 150px;margin: 0 auto;"></div>
				<div style="text-align: center;color: #e1bb7a;font-weight: bold;padding: 15px 0 0 ;">投火力值入口</div>
			</div> -->

		</div>
	

		<!-- <div style="color: #ffffff;text-align: center;margin-top: 20px;" @click="draw()">点击生成海报</div> -->

		<!-- <div class="cavas" ref="addAlert">
			
		</div> -->
		<div class="sharesss">
			<van-overlay :show="show" @click="show = false">
				<div style="position: fixed;width: 80%;left: 10%;top: 5%;" @click.stop>
					<img :src="imgUrl" alt="" style="border:none;" crossorigin="anonymous">
					<div v-show="!weixin" @click="downImg()"
						style="color: #ffffff;text-align: center;padding-top: 20px;line-height: 36px;">下载图片</div>
					<div v-show="weixin" style="color: #ffffff;text-align: center;padding-top: 20px;line-height: 36px;">
						长按图片保存</div>
				</div>
			</van-overlay>
		</div>


		<!-- <div class="h-50"></div> -->
		<!--加载中的动画-->
		<div id="Loading" v-show="loadings">
			<div class="loader-inner ball-beat">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>

	</div>

</template>
<style>
	@notice-bar-text-color: #000000;

	.sharesss .van-overlay {
		background-color: rgba(0, 0, 0, .8) !important;
	}

	.clearfix {
		*zoom: 1;
	}

	/*兼容IE清除浮动*/
	.clearfix:after {
		content: "\200B";
		height: 0;
		display: block;
		visibility: hidden;
		clear: both;
	}

	/*清除浮动*/
	#pad-w .van-list {}
</style>
<style scoped>

  #qrcodes{
    position: absolute;
    bottom: 11vh;
    left: 15vw;
    /* width: 50vw !important;
    height: 50vw !important; */
  }
 
</style>
<script>
	import Vue from 'vue';
	import QRCode from 'qrcodejs2'
	import {
		Overlay
	} from 'vant';

	Vue.use(Overlay);
	import {
		Toast
	} from 'vant';
	Vue.use(Toast);
	import html2canvas from 'html2canvas';
	import wx from 'weixin-js-sdk';
	export default {
		data() {
			return {
				info: [],
				value: '',
				description: '',
				imgUrl: '',
				QRImgUrl: '',
				QRlink: 'www.xxx.com',
				loadings: true,
				show: false,
				weixin: true,
			}
		},
		components: {},
		created: function() {

			this.$emit('footer', false);

		},


		mounted() {
			this.id = this.$route.query.id;
			this.recordapi();
			this.getShareInfo();
			this.is_weixn();
		},
		activated() {
			if (this.$route.meta.keepAlive) {
				this.$emit('footer', false);
			}
		},
		metaInfo() {
			const title = '个人分享'
			return {
				title,
				meta: [{
						description: this.info.description
					},
					{
						keywords: this.info.keyword
					},
				]
			}
		},
		methods: {
			getShareInfo() {
			      
			         // 只需要传地址就好，其他后端都会写好来
					let url=location.href.split('#')[0]
					let wPath = window.document.location.href;	
					 let pathName =  window.document.location.pathname;
					  let pos = wPath.indexOf(pathName);
					  
					  // 获取主机地址，如：http://localhost:8080
					  let localhostPath = wPath.substring(0, pos);
					
					  console.log(localhostPath);
				
					var that = this;
					that.$api.post("/Index/jssdk", {url:url }).then(res => {
			        const config = res.data;
					const huodong = res.huodong;
			        wx.config({
			          appId: config.appId,  // appID 公众号的唯一标识
			          timestamp: config.timestamp, // 生成签名的时间戳
			          nonceStr: config.nonceStr, //  生成签名的随机串
			          signature: config.signature, // 生成的签名
			          jsApiList: [
			            'updateAppMessageShareData',
			            'updateTimelineShareData',
			          ]
			        });
			        wx.ready(() => {
			          var shareData = {
			            title: huodong.title,
			            desc: huodong.introduction,
			            link:  localhostPath,
			            imgUrl:
			               huodong.picurl,
			          };
			          //点击要去分享
			          wx.updateAppMessageShareData(shareData);
			          wx.updateTimelineShareData(shareData);
			         
			        });
			      });
			    },
			// downloadByBlob(url,name) {
			//     let image = new Image()
			//     image.setAttribute('crossOrigin', 'anonymous')
			//     image.src = url
			//     image.onload = () => {
			//       let canvas = document.createElement('canvas')
			//       canvas.width = image.width
			//       canvas.height = image.height
			//       let ctx = canvas.getContext('2d')
			//       ctx.drawImage(image, 0, 0, image.width, image.height)
			//       canvas.toBlob((blob) => {
			//         let url = URL.createObjectURL(blob)
			//         download(url,name)
			//         // 用完释放URL对象
			//         URL.revokeObjectURL(url)
			//       })
			//     }
			//   },
			base64ToBlob(baseUrl) {
				let arr = baseUrl.split(',')
				let mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n)
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n)
				}
				return new Blob([u8arr], {
					type: mime
				})


			},

			draw() {
				var that = this;
				that.loadings = true
				html2canvas(that.$refs.box, {
					useCORS: true,
					scale: window.devicePixelRatio * 2,
					allowTaint: true, // 允许跨域图片
				}).then(function(canvas) {
					that.loadings = false
					//console.log(canvas.toDataURL())
					//that.$refs.addAlert.appendChild(canvas);
					that.imgUrl = canvas.toDataURL("image/png") //将canvas转为base64图片
					that.show = true
				});
			},
			is_weixn() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					this.weixin = true


				} else {
					this.weixin = false
				}
			},
			// downImg() { // 下载图片
			// 	let blob = this.base64ToBlob(this.imgUrl); 

			// 	let a = document.createElement('a')
			// 	a.setAttribute('download', 'poster.png')
			// 	a.href = URL.createObjectURL(blob);
			// 	a.click()
			// },
			downImg() {
				let aLink = document.createElement('a');
				let blob = this.base64ToBlob(this.imgUrl); //new Blob([content]);

				let evt = document.createEvent("HTMLEvents");
				evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
				aLink.download = 'poster.png';
				aLink.href = URL.createObjectURL(blob);
				aLink.dispatchEvent(new MouseEvent('click', {
					bubbles: true,
					cancelable: true,
					view: window
				})); //兼容火狐
			},
			qrcodes(text) {
        let width = document.documentElement.clientWidth*(155/375)
        console.log(width);
        let height = width
				let qrcode = new QRCode('qrcodes', {
					width,
					height,// 高度  
					text: text, // 二维码内容  
					// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
					// background: '#f0f'  
					// foreground: '#ff0'  
				})
				console.log(qrcode)
			},


			recordapi() {
				var that = this;

				// var userid = that.$cookieStore.getCookie('userid');
				// if (!userid) {
				// 	this.$router.push('Logins')
				// 	return false;
				// }
				that.$api.post("/Index/share", {
					userid: -1
				}).then(res => {
					this.loadings = false;
					that.info = res.info;
					

					this.qrcodes(window.location.origin);




					// that.QRlink=window.location.host+'#/Usercont?id='+res.info.idss
					//console.log(window.location.origin)
					// setTimeout(() => {
					//        this.draw()

					//          }, 3000)

				});
			},


		}
	}
</script>
